import type { Directive } from "vue"

export const vRipple: Directive<
  HTMLElement,
  {
    duration?: number
    backgroundColor?: string
  }
> = {
  mounted(el, binding, vnode, prevVnode) {
    let { position, overflow } = getComputedStyle(el)
    if (position == "static") {
      el.style.position = "relative"
    }
    if (overflow !== "hidden") {
      el.style.overflow = "hidden"
    }

    el.addEventListener("click", function doRipple(ev: MouseEvent) {
      let span = document.createElement("span")
      let size = Math.max(el.offsetWidth, el.offsetHeight) * 2
      let duration = (binding.value?.duration ?? 500) / 1000
      let backgroundColor = binding.value?.backgroundColor ?? "rgba(0, 0, 0, .15)"
      let { x, y } = el.getBoundingClientRect()
      let { clientX, clientY } = ev

      span.style.width = size + "px"
      span.style.height = size + "px"
      span.style.position = "absolute"
      span.style.backgroundColor = backgroundColor
      span.style.top = clientY - y - size / 2 + "px"
      span.style.left = clientX - x - size / 2 + "px"
      span.style.transform = "scale(0)"
      span.style.transition = `transform ${duration}s ease-in, opacity ${duration}s ease-in`
      span.style.borderRadius = "50%"
      span.style.pointerEvents = "none"

      el.appendChild(span)

      span.addEventListener("transitionend", function (e: TransitionEvent) {
        span.parentElement?.removeChild(this)
      })

      requestAnimationFrame(() => {
        span.style.transform = "scale(1)"
        span.style.opacity = "0"
      })
    })
  }
}

